<template>
  <div class="renderFunction">
    <h2>render渲染函数组件</h2>
    <n-button @click="clickHandle">打开</n-button>
  </div>
</template>

<script lang="ts">
import { defineComponent, createApp, h, reactive, Component, App } from "vue";
import { NModal } from "naive-ui";
import { openModal } from "@/components/basic-model/render";
// import Test from "./test.vue";

export default defineComponent({
  components: {},
  setup() {
    const state = reactive({
      isShow: false,
      title: "第一次",
    });
    let app: App<Element>;
    const changeFn = () => {
      console.log("接受到了");
      state.title = "改变了";
    };
    const closeFn = () => {
      state.isShow = false;
      app.unmount();
    };
    const clickHandle = () => {
      // state.isShow = true;
      // app = createApp(
      //   h(Test, {
      //     show: state.isShow,
      //     title: state.title,
      //     onChange: changeFn,
      //     onClose: closeFn,
      //   })
      // );
      // app.mount("#other-container");

      openModal({
        subContent: () => h("span", null, "111"),
      });
    };
    return {
      clickHandle,
    };
  },
});
</script>

<style scoped lang="less"></style>
